(docs) add Next.js setup instructions#343
Conversation
| webpack: (config, { webpack }) => { | ||
| config.resolve.mainFields = ["module", "main"]; | ||
|
|
||
| config.module.rules.push({ |
There was a problem hiding this comment.
We should add exclude option in the module rule so that unrelated node_modules are not processed by this babel loader.
exclude: /node_modules(?!\/react-strict-dom)/,| const config = { | ||
| presets: [ | ||
| [ | ||
| "next/dist/compiled/babel/preset-typescript", |
There was a problem hiding this comment.
"next/dist/compiled/babel/preset-typescript",
This line might not be necessary. We started using Turbopack for development at our company(not Meta) and so far we are using the below config without that line.
function getReactStrictDOMBabelLoader() {
const dev = process.env.NODE_ENV !== 'production'
return {
loader: 'babel-loader',
options: {
cacheDirectory: true,
parserOpts: {
plugins: ['typescript', 'jsx'],
},
presets: [
[
'react-strict-dom/babel-preset',
{
debug: dev,
dev,
rootDir: process.cwd(),
},
],
],
},
}
}
function withReactStrictDOM(nextConfig: NextConfig) {
return {
...nextConfig,
webpack(config: any, context: WebpackConfigContext) {
// Configure StyleX / React Strict DOM
config.module.rules.push({
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules(?!\/react-strict-dom)/,
use: [getReactStrictDOMBabelLoader()],
})
if (typeof nextConfig.webpack === 'function') {
return nextConfig.webpack(config, context)
}
return config
},
turbopack: {
...nextConfig.turbopack,
rules: {
...nextConfig.turbopack?.rules,
// Note: Intentionally excluding top-level files in the src directory to skip middleware.ts from being processed
// due to a Turbopack bug (https://github.com/vercel/next.js/issues/79592)
'./src/*/**/*.{js,jsx,ts,tsx}': {
default: {
foreign: false,
loaders: [getReactStrictDOMBabelLoader()],
},
},
'**/node_modules/react-strict-dom/**/*.{js,jsx,ts,tsx}': {
default: {
foreign: false,
loaders: [getReactStrictDOMBabelLoader()],
},
},
},
},
}
}Note that there is currently a bug in Next.js that prevents Turbpack loader from running when middleware.ts exists.
We are working around this limitation by excluding top-level src/*.{ts,tsx} files from being compiled with babel-loader, but this is specific to our setup and probably isn't something we want to recommend here.
foreign: trueis meant to exclude node_modules etc but I'm not too sure if this config is correct as it's not documented well. Just something we added to make it work.
|
Merged in #368. We can iterate from here as needed |
Closes react#382 That was my initial config in babel but think we adjusted at some point. I just started a new next.js app and faced the same issues as mentioned in react#382. With the changes in this PR it's working without trouble for webpack and turbopack. Cc @javascripter Ref react#343 (comment)
4 participants
There are some diff between Expo & Next.js, to setup this properly (especially because of babel config - when using turbopack), that's why I think it's important for new comers to have this in the guide.